<template>
  <div class="form-displaymode-setting form-setting-group form-setting-item">
    <div class="form-displaymode-setting-panel">
      <h4 class="form-displaymode-setting-title">
        <span class="form-displaymode-setting-title-name">{{title}}</span>
        <el-tooltip v-if="showTooltip" placement="top" popper-class="form-displaymode-setting-tooltip" >
          <div slot="content">
            <template v-if="isMulti">
              <div>{{$t('common.form.setting.displayModeSetting.des2')}}</div>
              <div class="form-displaymode-setting-item">{{$t('common.form.setting.displayModeSetting.des3', {data1:$t('common.base.multiple')})}}<span class="circle"></span>{{$t('common.form.setting.displayModeSetting.options', {count:1})}}  <span class="circle"></span>{{$t('common.form.setting.displayModeSetting.options', {count:2})}}</div>
              <div class="form-displaymode-setting-item">{{$t('common.form.setting.displayModeSetting.des4', {data1:$t('common.base.multiple')})}}<span class="square"></span>{{$t('common.form.setting.displayModeSetting.options', {count:1})}}  <span class="square"></span>{{$t('common.form.setting.displayModeSetting.options', {count:2})}}</div>
            </template>
            <template v-else>{{$t('common.form.setting.displayModeSetting.des5')}}<span class="circle"></span>{{$t('common.form.setting.displayModeSetting.options', {count:1})}}  <span class="circle"></span>{{$t('common.form.setting.displayModeSetting.options', {count:2})}}</template>
          </div>
          <i class="iconfont icon-question"></i>
        </el-tooltip>
      </h4>
    </div>
    <div class="form-displaymode-setting-type">
      <div class="type-btn-group">
        <el-radio-group  v-model="selectType" @change="update" size="medium" >
          <el-radio-button v-for="item in options" :key="item.label" :label="item.label">
            {{ item.value }}
          </el-radio-button>
        </el-radio-group>
       </div>
    </div>
  </div>
</template>

<script>
/* config */
import * as config from '@src/component/form/config';
/* props */
import { settingProps } from '@src/component/form/components/props';
import { t } from '@src/locales'
import { isFunction } from '@src/util/type';

export default {
  name: 'form-displaymode-setting',
  props: {
    ...settingProps,
    isMulti: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: t('common.form.setting.displayModeSetting.des1')
    },
    options: {
      type: Array,
      default: () => [
        {
          label: 1,
          value: t('common.form.setting.selectMode')
        },
        {
          label: 2,
          value: t('common.form.setting.radioMode')
        },
        {
          label: 3,
          value: t('common.form.setting.tagsMode')
        },
      ]
    },
    showTooltip: {
      type: Boolean,
      default: true
    },
    validate: Function,
  },
  data() {
    return{
      selectType: this.field.setting.selectType || 1
    }
  },
  methods: {
    update(value) {
      let message = isFunction(this.validate) && this.validate(value);
      if (message) {
        // 重置
        this.selectType = this.field.setting.selectType || 1;

        return this.$platform.alert(message);
      }
      this.$emit('input', value, 'selectType', true);
    }
  }
}
</script>

<style lang="scss" >
.form-displaymode-setting {
  .form-type-text {
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    
    font-size: $font-size-small;
    color: $text-color-regular;
    background-color: $bg-color-l3;
    border-radius: 10px;
  }
  .form-displaymode-setting-title{
    margin-bottom: 12px;
  }
  .form-displaymode-setting-type{
    .type-btn-group{
      .el-radio-group{
        width: 100%;
          label{
            width: 33.33%;
            margin: 0 !important; 
            .el-radio-button__inner{
              width: 100%;
              padding: 8px 10px;
              @include text-ellipsis();
            } 
      
          }
      }
    }
  }
  .el-radio-button:first-child .el-radio-button__inner{
    border-radius: 4px 0 0 4px;
  }
  .el-radio-button:last-child .el-radio-button__inner{
    border-radius: 0 4px 4px 0;
  }
}
.form-displaymode-setting-tooltip{
    .form-displaymode-setting-item{
      margin-top: 5px;
    }
    .circle{
      width: 10px;
      height: 10px;
      display: inline-block;
      border-radius: 50%;
      background: #fff;
      margin-right: 5px;
      
    }
    .square{
      width: 10px;
      height: 10px;
      display: inline-block;
      background: #fff;
      margin-right: 5px;  
    }
  }

</style>